import React from 'react';
import { KfBizDataSelect, KfBizDataSelectProps, KfBizDataTableSelect, KfBizDataTableSelectProps } from 'kf-web-library';
import * as API from '@/services';
import classNames from 'classnames';
import {Tooltip} from "antd";
import {BizKfExtraProColumnType} from "@/components";

const HxJournalColumnSelect = (props: Partial<KfBizDataSelectProps<API.JournalColumn, API.JournalColumnPageQueryParams>>) => {
  return (
    <KfBizDataSelect<API.JournalColumn, API.JournalColumnPageQueryParams>
      request={(p) => API.queryJournalColumns({
        ...p ,
        pageSize: 1000,
      })}
      entityKeys={{
        primaryKey: 'id',
        labelKey: 'name',
      }}
      {...props}
      className={classNames("hx-journal-column-select", props?.className)}
    />
  );
};

const HxJournalColumnTableSelect = (
  props: Partial<KfBizDataTableSelectProps<API.JournalColumn, API.JournalColumnPageQueryParams, BizKfExtraProColumnType>>,
) => {
  return (
    <KfBizDataTableSelect<API.JournalColumn, API.JournalColumnPageQueryParams, BizKfExtraProColumnType>
      entityTypeName={"栏目"}
      columns={[
        {
          title: '名称',
          dataIndex: "name",
          sorter: false,
          hideInSearch: true,
          ellipsis: true,
        },
        {
          title: '所属期刊',
          dataIndex: 'journalId',
          sorter: false,
          hideInSearch: false,
          hideInTable: true,
          valueType: 'hxJournalPicker',
        },
        {
          title: '所属刊期',
          dataIndex: 'periodId',
          sorter: false,
          hideInSearch: false,
          hideInTable: true,
          valueType: 'hxJournalPeriodPicker',
        },
        {
          title: '涉及期刊',
          dataIndex: "journals",
          width: 200,
          align: 'center',
          sorter: false,
          hideInSearch: true,
          render: (text, record) => {
            return (
              <Tooltip
                title={
                  <div>
                    <ol>
                      {record.journals.map((x) => {
                        return <li key={x.id}>{x.journalNameCn}</li>;
                      })}
                    </ol>
                  </div>
                }
              >
                <a>{record.journals?.length || 0}</a>
              </Tooltip>
            );
          },
        },
      ]}
      request={(p) => API.queryJournalColumns(p)}
      entityKeys={{
        primaryKey: 'id',
        labelKey: 'name',
      }}
      {...props}
      className={classNames("hx-journal-column-table-select", props?.className)}
    />
  );
};

interface CompoundedComponent {
  Select: typeof HxJournalColumnSelect;
  TableSelect: typeof HxJournalColumnTableSelect;
}

const picker: CompoundedComponent = {
  Select: HxJournalColumnSelect,
  TableSelect: HxJournalColumnTableSelect,
};

export default picker;
